初學者學程式最怕被艱深的程式碼嚇跑，因此在前端的學習上也要循序漸進，用對學習方法，做出一個網站並沒有那麼困難。這邊推薦大家看設計師 Even Wu 在 2013 JSDC 提供的講題：

如何教設計師前端技術

把書跟文件收起來，直接看最炫的效果

Codepen 是一個許多設計師練習 CSS 特效的地方，裡面有非常多 CSS 的技巧，程式碼都是公開的，直接從別人的程式碼去學習，也是一個很棒的學習方法。

3D 下拉選單

http://codepen.io/soulwire/pen/EKmwC

擬真的按鈕

http://codepen.io/soulwire/pen/bKens

CSS 畫出復仇者聯盟

http://codepen.io/mariosmaselli/pen/ghmwq

這幾個範例並不簡單，不過從這些範例我們可以知道，只會 HTML 與 CSS 就可以製作出很厲害的東西，第二跟第三個範例都沒有利用到任何 Javascript，只要再加上 Javascript 就能處理更多互動效果。

從現成的範例出發做學習 TheCodePlayer

初學者在學習時，就算有範例程式碼可以參考，但還是會不知道從何處下手開始寫，TheCodePlayer 這個網站除了有完整程式碼範例，更多了程式碼播放器的功能，初學者可以知道要先從哪個部分的程式碼開始動工，一步一步完成一個小作品。

像是一個雲動畫背景 Pure CSS3 animated clouds background

或是在展示圖片常用到的 Lightbox 效果 Make a Jquery and CSS3 powered Lightbox Gallery

特殊效果大集合 Codrops ****

另外再推薦一個擁有完整教學與範例程式碼的網站 Codrops，裡面的效果厲害到都會覺得怎麼會有人可以想得出來。

學習前端先從培養成就感開始，去 Codepen 上找別人的作品來參考，完整地複製一個 TheCodePlayer 的範例程式，都會讓功力大增，初學者不仿試試看這個學習方法。